<template>
  <div>
    <h2>el-tree</h2>

    <!-- el-tree
            data:树形数据 [{children:[{children:[....]}]}]
            props:{label:'label',children:'children'}
            作用域插槽：可以替换当前项的所有内容，可以个性化el-tree
               node:el-tree组件内提供的一些内部数据
               data：当前点击项的数据

    需求：
         显示省与市
            广东省                          人数
                 广州市                     人数
                 深圳市                     人数
    -->
    <el-tree :data="list" :props="{ label: 'name', children: 'child' }">
      <template v-slot="{ node, data }">
        <div>
          <span>{{ data.name }}</span>
          ----
          <el-button
            size="mini"
            @click="btnClick(node, data)"
          >点击获取数据</el-button>
        </div>
      </template>
    </el-tree>

    <hr>
    <el-tree :data="treeData">
      <template v-slot="{ data }">
        <div class="data">
          <span class="name">{{ data.label }}</span>
          <span>{{ data.total }}</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: 'it部门',
          child: [
            {
              name: '前端',
              child: [
                {
                  name: '初级前端'
                },
                {
                  name: '中级前端'
                },
                {
                  name: '高级前端'
                }
              ]
            },
            { name: 'java' },
            { name: 'ui' }
          ]
        }
      ],
      treeData: [
        {
          label: '广东省',
          total: '3000万',
          children: [
            { label: '广州市', total: '1700万' },
            { label: '深圳市', total: '1300万' }
          ]
        }
      ]
    }
  },
  methods: {
    btnClick(node, data) {
      // console.log(node, data)
    }
  }
}
</script>
<style lang="scss" scoped>
.data {
  width: 600px;
  display: flex;
  justify-content: space-between;
}
</style>
